<div class="box">

<!-- end box / title -->

<?php
  $msg = $this->session->flashdata('message');
  if($msg) : 
?>
<div id="box-messages">
  <div class="messages">
    <div id="message-success" class="message message-success">
      <div class="image">
        <img src="'. base_url() .'file/shell/smooth/resources/images/icons/success.png" alt="Success" height="32" />
      </div>
      <div class="text">
        <h6><?php echo $msg; ?></h6>
      </div>
      <div class="dismiss">
        <a href="#message-success"></a>
      </div>
    </div>
  </div>
</div>
<?php endif; ?>

<div class="table">
  <base href="<?php echo base_url() ?>" />

  <table id="records" class="showOutlet" width="100%">
    <thead> </thead>
    <tbody> </tbody>
  </table>

</div>

<script type="text/javascript">


var readUrlOutlet   = 'index.php/Data_login/read/',
delHref,
updateHref,
updateId;

$(document).ready( function() {

  show_outlet_pictures();

}); //end document ready



// Jquery Data Tabel 18 Feb 2013 projack89
function show_outlet_pictures() {
  $('.showOutlet').dataTable({
    "bJQueryUI": true, // aktifkan tampilan tabel JQueryUI
    "sAjaxSource": readUrlOutlet, //data source
    "sAjaxDataProp": "aaData", //variabel yg menampung data table
    "bServerSide": true, //serverside processing true
    "bProcessing": true, // tampilkan 'processing...' status saat data dipanggil
    //"sPaginationType": 'fullNumbers',
    "bPaginate": true,
    "aoColumns":[ //tentukan kolom pd tabel yg akan menampung value dari server
	  //{"mDataProp": "no++",   "sTitle": "No=1;"},	
      {"mDataProp": "tanggal",   "sTitle": "Tanggal"},
	  {"mDataProp": "Cluster",      "sTitle": "Cluster"},
      {"mDataProp": "NIK", "sTitle": "NIK"}, 
	  {"mDataProp": "Region", "sTitle": "Region"},
	  {"mDataProp": "Nama", "sTitle": "Nama"},
	  {"mDataProp": "Login", "sTitle": "Sales Login"},
	  {"mDataProp": "timestamp_login", "sTitle": "Waktu Login"},
	  {"mDataProp": "timestamp_logout", "sTitle": "Waktu Logout"}
    ],

    "fnRowCallback": function(nRow, aaData, iDisplayIndex, iDisplayIndexFull) 
    {
     //$(nRow).find('td').eq(-1).after('<a href="'+approveUrlNew+'/'+aaData[0]+'">Approve</a> |  <a href="'+updateUrlNew+'/'+aaData[0]+'">Edit</a> | <a href="'+delUrlNew+'/'+aaData[0]+'">Delete</a>'); //buat link action 
      //$(nRow).find('td').eq(0).before('<td>'+(parseInt(iDisplayIndex,10)+1+parseInt(dis))+'</td>'); 
     //$(nRow).find('td').eq(-1).after('<td><a id="'+aaData[5]+'" onclick="popUp(this.id)" target="_blank"><img style="width:50px" src="<?php echo base_url()?>'+aaData[5]+'"/></a></td>'); //buat link action 
      return nRow;
    }, 

    "fnServerData": function ( sSource, aoData, fnCallback ) { 
      $.getJSON( sSource, aoData, function (json) { 

      dis=json['iDisplayStart'];
      fnCallback(json);
      });
    }  
  });

  //$('.showOutlet thead tr').find('th').eq(0).before('<th class="ui-state-default">No</th>');
  //$('.showOutlet thead tr').find('th').eq(-1).after('<th class="ui-state-default">Outlet</th>');
}


</script>

</div>